调整 Layout 基础样式
概述
在实现用户私信详情页面之前，需调整页面基础布局样式。核心调整包括：使用 Element Plus 的 ElScrollBar 替换浏览器默认滚动条，以及将 padding 从外层容器移至内部内容区域，确保滚动条紧贴窗口边缘。
调整一：使用 ElScrollBar 替换默认滚动条
为什么替换
- 浏览器默认滚动条样式在 Chrome/Firefox/Safari 中不一致
ElScrollBar提供统一的滚动条外观- 更好的暗黑模式适配
实现方式
<template>
<div class="layout-content">
<!-- 将头部和标签页包裹在一起 -->
<div ref="headerRef">
<LayoutHeader />
<LayoutTabs />
</div>
<!-- 内容区域使用 ElScrollBar -->
<ElScrollBar class="content-scrollbar">
<router-view />
</ElScrollBar>
</div>
</template>
vue
调整二：Padding 内移
问题
外层容器设置 padding 时，ElScrollBar 的滚动条位置会偏离窗口边缘：
┌── 外层容器 (padding) ──────────────┐
│ ┌── 内容区域 ──────────────────┐ │
│ │ │滚动条│ │
│ │ │ ↑ │ │
│ │ │偏移 │ │
│ └────────────────────────┘ │ │
└───────────────────────────────────┘
text
解决方案
将 padding 从外层容器移至内容区域内部：
<template>
<!-- 外层不设 padding -->
<ElScrollBar class="content-scrollbar">
<!-- padding 由内部内容控制 -->
<div class="p-4">
<router-view />
</div>
</ElScrollBar>
</template>
<style scoped>
.content-scrollbar {
height: 100%;
}
</style>
vue
修正后滚动条紧贴窗口边缘：
┌── 内容区域 (padding) ────────────┐
│ ┌── 内部内容 ────────────────┐ │
│ │ │ │
│ │ 滚动条 ││ │
│ │ 紧贴边 ││ │
│ └────────────────────────────┘ │
└──────────────────────────────────┘
text
头部高度自适应
使用 settings.user.adaptive 配置偏移量，消除多余的滚动条：
// 计算内容区域可用高度
const adaptiveHeight = computed(() => {
const offset = settings.user.adaptive || 0
return `calc(100vh - ${headerHeight.value + offset}px)`
})
typescript
调整对比
| 调整项 | 调整前 | 调整后 |
|---|---|---|
| 滚动容器 | 普通 div | ElScrollBar |
| 外层 padding | 在滚动容器外部 | 移至内容区域内部 |
| 滚动条位置 | 偏离窗口边缘 | 紧贴窗口右边缘 |
| 头部区域 | 与内容同级 | 包裹在独立 div 中 |
关键要点
ElScrollBar替换浏览器默认滚动条，确保跨浏览器样式一致- Padding 必须放在
ElScrollBar内部，否则滚动条位置偏移 - 头部和标签页用独立
div包裹，便于后续高度计算 adaptive偏移量用于微调内容区域高度，消除多余滚动条
↑